<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Loading</title>
	<style>
		html {
			height: 100%
		}
		body {
			width: 100%;
			height: 100%;
			text-align: center;
			background: radial-gradient(circle, #fff 0%, #bbb 65%);
			display: table;
		}
		.block {
			display: table-cell;
			vertical-align: middle
		}

		.ouro {
			position: relative;
			display: inline-block;
			height: 46px;
			width: 46px;
			margin: 1em;
			border-radius: 50%;  
			background: #DDDDDD;
			overflow:hidden;
			box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset,
						0 0 25px rgba(0, 0, 255, 0.075);
		}

		.ouro:after {
			content: "";
			position: absolute;
			top: 9px;
			left: 9px;
			display: block;
			width: 28px;
			height: 28px;
			background: #F2F2F2;
			border-radius: 50%;
			box-shadow: 0 0 10px rgba(0, 0, 0, .1);
		}

		.ouro > span {
			position: absolute;
			width: 50%;
			height: 100%;
			overflow: hidden;
		}

		.left {
			left: 0
		}

		.right {
			left: 50%
		}

		.anim {
			position: absolute;
			left: 100%;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 999px;
			background: #508EC3;
			opacity: 0.8;
			animation: ui-spinner-rotate-left 3s infinite;
			transform-origin: 0 50% 0;
		}

		.left .anim {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}

		.right .anim {
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
			left: -100%;
			transform-origin: 100% 50% 0;
		}
		.ouro .anim {
			animation-delay: 0s;
			animation-timing-function: linear;
		}

		.ouro .right .anim{
			animation-name: ui-spinner-rotate-right;
			animation-delay: 1.5s;
		}

		.round .ouro:after {
			display:none
		}

		.double .ouro:after {
			width: 13px;
			height: 13px;
			left: 7px;
			top: 7px;
			border: 10px solid #ddd;
			background: transparent;
			box-shadow: none;
		}

		@keyframes ui-spinner-rotate-right {
			0% {
				transform: rotate(0deg)
			}

			25% {
				transform: rotate(180deg)
			}

			50% {
				transform: rotate(180deg)
			}

			75% {
				transform: rotate(360deg)
			}

			100% {
				transform: rotate(360deg)
			}
		}

		@keyframes ui-spinner-rotate-left {
			0% {
				transform: rotate(0deg)
			}

			25% {
				transform: rotate(0deg)
			}

			50% {
				transform: rotate(180deg)
			}

			75% {
				transform: rotate(180deg)
			}

			100% {
				transform: rotate(360deg)
			}
		}
	</style>
</head>
<body>
	<div class="block">
		<p class="circle">
			<span class="ouro">
				<span class="left"><span class="anim"></span></span>
				<span class="right"><span class="anim"></span></span>
			</span>
		</p>
		<p class="round">
			<span class="ouro">
				<span class="left"><span class="anim"></span></span>
				<span class="right"><span class="anim"></span></span>
			</span>
		</p>
	</div>
</body>
</html>